<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>聊天界面</title>
    <script th:src="@{jquery-3.2.1.min.js}"></script>
    <script th:src="@{js/stomp.min.js}"></script>
    <script th:src="@{js/sockjs.min.js}"></script>
</head>
<body>
    <p>聊天室</p>
    <form id="kxcForm">
        <textarea rows="4" cols="60" name="text"></textarea>
        <input type="submit"/>
    </form>
<script>
    $("#kxcForm").submit(function (e) {
        e.preventDefault();
        var text=$('#kxcForm').find('textarea[name="text"]').val();
        sendSpittle(text);
    });
    var sock =new SockJS("/endpointChat");
    var stomp=Stomp.over(sock);
    stomp.connect('guest','guest',function (frame) {
        stomp.subscribe("/user/queue/notifications",handleNotification)
    });
    function handleNotification(message) {
        $('#output').append("<b> Received:"+message.body+"</b><br/>")
    }
    function sendSpittle(text) {
        stomp.send("/chat",{},text);
    }
    $('#stop').click(function () {
        sock.close();
    })
</script>
<div id="output"></div>
</body>
</html>